<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="utf-8" />
<title>table模块快速使用</title>
<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
</head>
<body>
	<div class="xm-d2-hang1">
		<div class="pzright"
			style="width:100%;display: flex;justify-content: flex-start;float:right;">
			<p class="xm-d1-p2">
				<button th:if="${userRole} eq 'admin'"  id="add" onclick="addUser()"
					class="layui-btn layui-btn-radius btnys">
					<i class="layui-icon">&#xe608;</i>添加
				</button>
				<button class="layui-btn" id="btn-refresh">刷新</button>
			</p>
		</div>
		<div class="clear"></div>
	</div>
	<table id="userTable" lay-filter="userTable"></table>

<script type="text/javascript" src="/layui/layui.all.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>

<script type="text/javascript" src="/js/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" th:inline="javascript">
var uName = [[${userRole}]]
layui.use('table', function(){
  var table = layui.table;
  var form = layui.form; 
  //第一个实例
  table.render({
    elem: '#userTable'
    ,height: 400
    ,url: '/user/getAll' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'loginname', title: '登录名', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:200}
      ,{field: 'email', title: '邮箱', width: 250, sort: true}
      ,{filed: 'status',title:'启用状态',templet:'#statusTemp'} // 这个就是用来在表格上显示开关的。     
      , {templet: complain, title: '操作'}
    ]]
  });
  
    $('#btn-refresh').click(function () {
          location.reload();
        });
  form.on('switch(status)', function(data){
 
// 得到开关的value值，实际是需要修改的ID值。
var id = data.value;
var status = this.checked ? '1' : '0';
 
$.ajax({
  type: 'POST',
  url: '/user/updateStatus/',
  data: {"id" :id,"status":status},
  success: function(data){  
    console.log(data);
  
  if(data=="success"){ 
        layer.msg('操作成功！');  
	  }else{
        console.log(data);
        layer.msg('数据异常，操作失败！'); 
       }},		  
 
});

});
    //监听工具条
        table.on('tool(userTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
			if(data.permissionName==null){
				if (layEvent === 'del') {				 
							 var href = {}
	            	 		  layer.confirm('确定要该用户吗？', {
	        	    	        btn: ['确定','取消'] //按钮
			            	    }, function(){
	                   			  $.ajax({
					                    type:"post",
					                    url:"/user/delUser?id="+data.id,
					                    success:function(d){
					                        if(d=="success"){
					                         layer.msg('删除成功');//下面是关键代码
					                         parent.layer.closeAll();
       										 setTimeout(function () {location.reload()}, 330);
       										    
					                        }
					                        else{
					                        layer.msg(d, {icon: 6,time:4000, shade:0.4});				                        
					                        }
					                        layer.closeAll();//关闭弹窗
					                    }
					                })
	             			 });
						
						                
		            } if (layEvent === 'edit') {
		               
	                layer.open({
			            type: 2,
			            title: '修改菜单',
			            area: ['800px', '400px'], //宽高
			            fix: false, //不固定
			            maxmin: true,
			            content:'/user/updateUser?id='+data.id
			        });
	            }if (layEvent === 'editRole') {
		               
	                layer.open({
			            type: 2,
			            title: '修改角色',
			            area: ['350px', '280px'], //宽高
			            fix: true, //不固定
			            maxmin: true,
			            content:'/role/findRoleByUid?uid='+data.id
			        });
	            }
	            
			}
        });

function complain(d){//操作中显示的内容
        	if(uName=="admin"){
        		return [         	
                       /*  '<a class="operation" lay-event="edit" href="javascript:void(0)" title="编辑">',
            	     	'<i class="layui-icon layui-icon-edit"></i></a>', */
            	     	'<a class="operation" lay-event="del" href="javascript:void(0)"  title="删除">',
            	     	'<i class="layui-icon layui-icon-delete" ></i></a>',
            	     	'<button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="editRole" href="javascript:void(0)"  title="设置角色">设置角色</button>',	         	     	
            	     	].join('');
        	}else{
        		return '';
        	}
        	
        }  
  
});

function addUser(){
		layer.open({
			            type: 2,
			            title: '新增用户',
			            area: ['800px', '400px'], //宽高
			            fix: false, //不固定
			            maxmin: true,
			            content:'/user/addUser'
			        });

}

      
</script>
	<script type="text/html" id="statusTemp">
{{#  if(d.status==1){ }}
    <input type="checkbox" name="status" lay-skin="switch"   lay-text="开启|关闭"  value= "{{ d.id}}"  lay-filter="status" checked="true" />
{{#  } else { }}
    <input type="checkbox" name="status" lay-skin="switch"  lay-text="开启|关闭"  value=" {{ d.id}}" lay-filter="status" />
{{#  } }}
</script>
</body>
</html>